<template>
  <div class="zy-content">
    <!--    投料 -->
    <!--    <div class="searchBox search-box-layout">-->
    <!--      <search :columns="searchData" @getSearch="getSearch(arguments)"></search>-->
    <!--    </div>-->
    <div class="list-layout mt16">
      <div class="btns clear">
        <!--        {{ $t('common.listInformation') }}-->
        <span class="title">
          投料信息区
        </span>
        <Button @click="handleAdd">
          投料
        </Button>

      </div>
      <div class="tableContent" :style="{ height: tableHeight + 'px' }">
        <Table :columns="columns" ref="selection" border :data="list" :height="tableHeight">
        </Table>
      </div>
      <!--      <div class="pageWrap mt16">-->
      <!--        <pageLeftTitle :total="total"/>-->
      <!--        <Page :total="total" :page-size="params.pageSize" :current="params.current" @on-change="changePageNum"-->
      <!--              @on-page-size-change="changePageSize" show-sizer/>-->
      <!--      </div>-->
    </div>
    <Modal :mask-closable="false" v-model="deleteShow" title="删除" class="modal-title-layout">
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>{{ $t('common.sureDelete') }}</span>
      </p>
      <div slot="footer">

        <Button type="default" @click="deleteShow = false">取消</Button>
        <Button type="primary" @click="handleDeleteSure">确定</Button>
      </div>
    </Modal>
    <!--    开工弹框-->
    <!--    <Modal :mask-closable="false" v-model="startShow" title="开工" class="modal-title-layout">-->
    <!--      <div class="icon red">-->
    <!--        <i class="iconfont zy-common-wancheng"></i>-->
    <!--      </div>-->
    <!--      <p class="title">-->
    <!--        <span>是否确认开工？</span>-->
    <!--      </p>-->
    <!--      <div slot="footer">-->
    <!--        <Button type="default" @click="startShow = false">取消</Button>-->
    <!--        <Button type="primary" @click="handleStart">确定</Button>-->
    <!--      </div>-->
    <!--    </Modal>-->

    <!--    投料弹框-->
    <Modal :mask-closable="false" v-model="createStatus" title="投料" class="modal-title-layout">
      <Form
          ref="reportWorkItem"
          :model="reportWorkItem"
          class="form-container formList"
          label-position="top"
          :rules="rules"
      >
        <Row :gutter="16">
          <!--          <Col span="24">-->
          <!--            <FormItem-->
          <!--                label="机台名称"-->
          <!--                class="custom-form-item"-->
          <!--            >-->
          <!--              <Input-->
          <!--                  disabled-->
          <!--                  v-model="reportWorkItem.equipmentName"-->
          <!--                  placeholder=""-->
          <!--                  class="inputBorder"-->
          <!--              ></Input>-->
          <!--            </FormItem>-->
          <!--          </Col>-->

          <!--          <Col span="24">-->
          <!--            <FormItem-->
          <!--                label="最大数量"-->
          <!--                class="custom-form-item"-->
          <!--            >-->
          <!--              <Input-->
          <!--                  disabled-->
          <!--                  v-model="reportWorkItem.orderCount"-->
          <!--                  placeholder=""-->
          <!--                  class="inputBorder"-->
          <!--              ></Input>-->
          <!--            </FormItem>-->
          <!--          </Col>-->
          <Col span="24">
            <FormItem label="物料" required prop="materialId">
              <Select v-model="reportWorkItem.materialId" placeholder="请选择物料">
                <Option v-for="(item,index) in productBom" :key="index.id" :value="item.id" :label="item.materialName
"></Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem
                label="投料数量"
                required
                prop="materialCount"
                class="custom-form-item"
            >
              <Input
                  type="number"
                  v-model="reportWorkItem.materialCount"
                  placeholder="请输入报工数量"
                  class="inputBorder"
              ></Input>
            </FormItem>
          </Col>
          <!--          <Col span="24">-->
          <!--            <FormItem-->
          <!--                label="批次号"-->
          <!--                required-->
          <!--                class="custom-form-item"-->
          <!--            >-->
          <!--              <Input-->
          <!--                  v-model="reportWorkItem.formMaterialCount"-->
          <!--                  placeholder="请输入批次号"-->
          <!--                  class="inputBorder"-->
          <!--              ></Input>-->
          <!--            </FormItem>-->
          <!--          </Col>-->
        </Row>
      </Form>
      <div slot="footer">
        <Button type="default" @click="createStatus = false">取消</Button>
        <Button type="primary" @click="handleStart('reportWorkItem')">确定</Button>
      </div>
    </Modal>

    <!--    <importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState"-->
    <!--                      @importExcelChange="importExcelChange">-->
    <!--    </importExcelModal>-->
  </div>
</template>

<script>
import {basedataEquipmentAllApi} from '@/api/dataBasic/process.js'
import ImportExcelModal from '@/components/importExcel.vue';
import fileDownload from "js-file-download";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from '@/mixins/toggleTableOperation';
import {
  BomApi,
  editApi,
  addApi,
  deleteApi,
  productApi,
  queryByWorkOrder,
  materialAllApi
} from '@/api/dataBasic/materialBom'

export default {
  name: "workPlanFeeding",
  components: {ImportExcelModal, search},
  mixins: [toggleTableOperation],
  data() {
    return {
      pageId: null,
      reportWorkItem: {},
      reportWorkShow: false,
      params: {
        pageSize: 20,
        current: 1
      },
      rules: {
        materialId: [
          {required: true, message: "请选择物料", trigger: "blur"},
        ],
        materialCount: [
          {required: true, message: "请输入投料数量", trigger: "blur"},
        ]
      },
      startForm: {},
      startShow: false,
      productBom: [],
      searchData: [
        {
          title: "工单号",
          key: "code"
        }
      ],
      columns: [{
        title: '序号',
        width: 80,
        align: 'center',
        render: (h, params) => {
          return h('span', params.index + (this.params.current - 1) * this.params.pageSize + 1);
        },
      },
        {
          title: '工单号',
          key: 'workNo',
          align: 'center',
          minWidth: 200,
          resizable: true,
        },
        {
          title: '数量',
          key: 'materialCount',
          align: 'center',
          minWidth: 200,
          resizable: true,
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
          minWidth: 200,
          resizable: true,
        }
      ],
      importExcelState: false,
      list: [],
      total: 0,
      deleteShow: false,
      currentItem: {},
      createStatus: false,
      form: {},
      nameList: [],
      searchParams: {},
      equipmentList: []

    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 250;
    }
  },

  mounted() {
    this.pageId = this.$route.query.id ? this.$route.query.id : null;
    this.getSearchList()
    this.relevance()
    this.getList()
  },
  methods: {
    getList() {
      this.axios
          .post("/api/throwMaterialRecord/getAll", {params: {workOrderId: this.pageId}}).then(res => {
        if (res.code !== 200) {
          this.$Message.warning(res.message);
          return false
        }
        this.list = res.data
      })

    },
    getSearchList() {
      this.axios
          .get("/api/throwMaterialRecord/queryMaterialList", {params: {workId: this.pageId}})
          .then((res) => {
            if (res.code !== 200) {
              this.$Message.warning(res.message);
              return false
            }
            console.log(res.data,'czq')
            this.productBom = res.data
          })
      // materialAllApi().then(res => {
      //   if (res.code === 200) {
      //     this.productBom = res.data
      //   }
      // })
    },
// 确定投料
    handleStart(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = JSON.parse(JSON.stringify(this.reportWorkItem))
          param.workOrderId = this.pageId
          this.axios
              .post("/api/workOrderStartRecord/putMaterialRedord", param)
              .then((res) => {
                if (res.code === 200) {
                  this.$Message.success(res.message);
                  this.startForm = {};
                  this.createStatus = false;
                  this.getList();
                } else {
                  this.$Message.warning(res.message);
                }
              });
        }
      })

    },
    relevance() {
      basedataEquipmentAllApi().then(res => {
        if (res.code === 200) {
          this.equipmentList = res.data
          this.searchData[0].dicData = res.data
        }
      })
      // materialAllApi().then(res => {
      //   if (res.code === 200) {
      //     this.productBom = res.data
      //     this.searchData[1].dicData = res.data
      //   }
      // })
    },
    getSearch(arg) {
      this.searchParams = arg[0] || {};
      this.getList();
    },

    importExcelChange(val) {
      this.importExcelState = false;
      if (val === 'success') {
        this.$Message.success('导入成功!');
        this.changeNum();
      }
    },
    reset() {
      this.params = {pageSize: 20, current: 1};
      this.getList();
    },
    changeNum() {
      this.params.current = 1;
      this.params.pageSize = 20;
      this.getList();
    },
    // 点击投料
    handleAdd() {
      this.reportWorkItem = {};
      this.createStatus = true;
    },

    handleImportData() {
      this.importExcelState = true;
    },
    handleAddSubmit() {
      const url = this.form.id ? editApi : addApi;
      url(this.form).then(res => {
        this.$Message.success(res.message);
        this.currentItem = {};
        this.createStatus = false;
        this.getList();
      })
          .catch(error => {
            console.error('Error submitting form:', error);

          });

    },
    // 点击详情
    toDetail(row) {
      this.$router.push({
        path: '/workPlanDetail/index', row,
      })
    },
    // 点击开工
    handleEditRow(row) {
      this.startForm = {...row};
      this.startShow = true;
    },
    // 点击报工
    reportWork(row) {
      this.reportWorkItem = row;
      for (const item of this.equipmentList) {
        if (item.id == this.searchParams.id) {
          this.reportWorkItem.equipmentName = item.equipmentName
        }
      }
      this.reportWorkShow = true;
    },
    // 点击删除
    handleDeleteRow(row) {
      this.currentItem = row;
      this.deleteShow = true;
    },
    // 确认删除
    handleDeleteSure() {
      this.axios
          .delete("/api/workOrder/delete", {
            ids: [this.currentItem.id]
          })
          .then((res) => {
            if (res.code === 200) {
              this.$Message.success(res.message);
              this.currentItem = {};
              this.deleteShow = false;
              this.getList();
            } else {
              this.$Message.warning(res.message);
            }
          });
    },
    changePageNum(val) {
      this.params.current = val;
      this.getList();
    }
    ,
    changePageSize(val) {
      this.params.pageSize = val;
      this.getList();
    }
  }
}
</script>

<style scoped>
.tableContent {
}

.iViewIcon {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
